<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 500px;
            margin: 0 auto;
        }

        .header {
            text-align: center;
            background-color: aquamarine;
            line-height: 60px;
        }

        ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        li {
            border-bottom: 1px solid;
            height: 50px;
        }

        img {
            width: 40px;
            height: 40px;
        }

        input[type='text'] {
            width: 40px;
            height: 30px;
            padding: 0;
            box-sizing: border-box;
            line-height: 30px;
            vertical-align: top;
            margin-top: 5px;
            text-align: center;
        }

        span {
            width: 30px;
            height: 30px;
            display: inline-block;
            background-color: #ccc;
            line-height: 30px;
            text-align: center;
            cursor: pointer;
        }

        span:hover {
            background-color: #666;
        }

        .counter {
            float: right;
            line-height: 40px;
            user-select:none
        }

        i {
            font-size: 30px;
            line-height: 40px;

            float: right;
            margin: 0 10px;
            cursor: pointer;
        }

        i:hover {
            color: red;
        }

        .footer {
            line-height: 60px;
            background-color: yellow;
            overflow: hidden;
        }

        em {
            color: red;
            font-weight: bold;
            float: right;
        }

        button {
            outline: none;
            width: 80px;
            height: 40px;
            border: none;
            background-color: red;
            float: right;
            line-height: 40px;
            margin-top: 10px;
            margin: 10px;
        }
        .name{
           display: inline-block;
           line-height: 50px;
           vertical-align: top;
        }
    </style>
</head>

<body>
    <div id="app">
        <my-cart></my-cart>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>


        var CartHeader = {
            template: `
                <div class="header">
                    <h3>{{uname}}的商品</h3>
                </div>
            
            `,
            props: ['uname']
        }

        var CartContent = {
            template: `
              <div class="content">
                <ul>
                    <li v-for='item in list' :key='item.id'>
                        <img :src="item.img" alt="">
                        <div class='name'>{{item.name}}</div>
                        <i @click='del(item.id)'>X</i>
                        <div class="counter">
                            <span @click = 'sub(item.id)'>-</span>
                            <input type="text" :value ="item.num" @blur = 'changeNum(item.id,$event)'>
                            <span @click = 'add(item.id)'>+</span>
                        </div>

                    </li>
                    
                    
                </ul>
            </div>
            
            `,
            props:['list'],
            methods: {
                del:function(id){
                    // 把id通过自定义事件方式传递给父组件
                    this.$emit('cart-del',id)
                },
                changeNum(id,event){    
                    this.$emit('change-num',{
                        id:id,
                        num:event.target.value,
                        type:'change'
                    })
                },
                sub(id){
                    this.$emit('change-num',{
                        id:id,
                        type:'sub'
                    })
                },
                add(id){
                    this.$emit('change-num', {
                        id: id,
                        type: 'add'
                    })
                }
            },
        }


        var CartFooter = {
            template: `
            <div class="footer">
                <button>结算</button>
                <em class="total">总价：{{total}}</em>
            </div>

            `,
            props:['list'],
            computed:{
                total:function(){
                    // 计算商品总价
                    var t = 0;
                    this.list.forEach(item=>{
                        t += item.price * item.num;
                    })
                    return t;
                }
            }
        }

        Vue.component('my-cart', {
            data() {
                return {
                    uname: '刘为',
                    list: [{
                        id: 1,
                        name: 'TCL彩电',
                        price: 1000,
                        num: 1,
                        img: 'img/a.jpg'
                    }, {
                        id: 2,
                        name: '机顶盒',
                        price: 1000,
                        num: 1,
                        img: 'img/a.jpg'
                    }, {
                        id: 3,
                        name: '海尔冰箱',
                        price: 1000,
                        num: 1,
                        img: 'img/a.jpg'
                    }, {
                        id: 4,
                        name: '小米手机',
                        price: 1000,
                        num: 1,
                        img: 'img/a.jpg'
                    }, {
                        id: 5,
                        name: 'PPTV电视',
                        price: 1000,
                        num: 1,
                        img: 'img/a.jpg'
                    }]
                }
            },
            template: `
                <div class="container">
                    <cart-header :uname='uname'></cart-header>
                    <cart-content :list = 'list'  @change-num = 'changeNum($event)' @cart-del = 'delCart($event)'></cart-content>
                    <cart-footer :list='list'></cart-footer>
                </div>
            `,
            components: {
                'cart-header': CartHeader,
                'cart-content': CartContent,
                'cart-footer': CartFooter
            },
            methods: {
                delCart(id){
                    
                    // 根据ID删除list对应数据
                    // 1、找到ID对应数据的索引
                    var index = this.list.findIndex(item=>{
                        return item.id == id;
                    })
                    // 2、根据索引删除对应数据
                    this.list.splice(index,1);
                },
                changeNum(val){
                    // 分为三种情况进行处理
                    // 根据子组件传递过来的数据更新list中对应的数据
                    if(val.type == 'change'){
                         this.list.some(item => {
                            if (item.id == val.id) {
                                item.num = parseInt(val.num);
                                return true;
                            }
                        })
                    }else if(val.type == 'sub'){
                        this.list.some(item => {
                            if (item.id == val.id) {
                                item.num -= 1;
                                if(item.num <=0) item.num = 0;
                                return true;
                            }
                        })
                    } else if (val.type == 'add') {
                        this.list.some(item => {
                            if (item.id == val.id) {
                                item.num += 1;
                                return true;
                            }
                        })
                    }

                   
                }
            },
        })
        var vm = new Vue({
            el: '#app',
            data: {

            },
        })
    </script>
</body>

</html>